<template>
  <div class="hd Confirm">
   
    <search-bar :menu="menu"></search-bar>
    <div class="content">
      <position>
        <router-link to="/cloud">云诊室</router-link>
        &gt;
        <span class="last">填写问诊信息</span>
      </position>

      <steps :step="1" :text="['选择科室医生', '填写问诊信息', '支付费用', '预约成功', '等待医生视频', '完成就诊']"></steps>

      <div class="border_content four-cornor-wrapper">
        <i class="l"></i>
        <i class="r"></i>
        <i class="t"></i>
        <i class="b"></i>
        <div class="sure_message">
          确认信息
        </div>
        <div class="sure_message_content">
          <div class="name">
            <span>预约人姓名：</span>
            <select-role @btnclick="selectFamilyHandle"></select-role>
          </div>
          <!-- <div class="jiu_card_num">
            <span>就诊卡号：</span>
            <span>6743923</span>
          </div>
          <div class="yi_card_number">
            <span>医保卡号：</span>
            <span>6743923</span>
          </div> -->
          <div class="id_card_num">
            <span>证件号码：</span>
            <span class="f20">{{person.certificate.certificateNo}}</span>
          </div>
          <div class="department_time">
            <div class="department_title">
              就诊科室：
            </div>
            <div class="doctor_name f20">
              <span>{{doctor.regDeptName || dep.deptName}}</span>
              <span>{{doctor.doctorName}}</span>
            </div>
            <div class="onduty_time_title">
              就诊时间段：
            </div>
            <div class="onduty_time f20">
              {{dep.workDate}} &nbsp;&nbsp; {{time.startTime}} - {{time.endTime}}
            </div>
          </div>
          <div class="price">
            <span>挂号费：</span>
            <span  class="f20">{{dep.charge}}</span>
            <span>元</span>
          </div>

          <div class="symptom_desc">
            <span>
              <span class="needed">*</span>病情描述：
            </span>
            <el-input type="textarea" :rows="4" placeholder="请输入病情描述" v-model="symptom_text" class="symptom_text"></el-input>
          </div>

          <div class="symptom_desc">
            <span>病历照片上传：</span>
            <el-upload
              :action="imgapi"
              :headers="uploadheader"
              list-type="picture-card"
              :before-upload="beforeupload"
              :on-preview="handlePictureCardPreview"
              :on-success="uploadok"
              :on-change="filechange"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog v-model="imgboxdialog" size="tiny">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </div>

          <div class="money_button">
            <a href="javascript:;" class="common-main-button"  @click="goPay">前往付费</a>
            <a href="javascript:;" class="common-sub-button" @click="goBack">返回</a>
          </div>
        </div>

        <div class="warn">
          <ul>
            <li>
              <img src="../../assets/warn.png" alt="">
              <span>温馨提示</span>
            </li>
            <li v-for="v in APPOINT_DESCRIPTION" :key="v">
              {{v}}
            </li>

          </ul>
        </div>
      </div>
    </div>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialog"
      :close-on-click-modal = "false"
      :close-on-press-escape = "false"
      size="tiny"
      :show-close = "false"
    >
      <div v-html="dialogContent" class="text-indent"></div>
      <div slot="footer" class="dialog-footer">
        <a href="javascript:;" class="common-main-button"  @click="confirmSubmit">确 定</a>
      </div>
    </el-dialog>

    <el-dialog
      title="云诊室友情提醒"
      :visible.sync="cloud_tips_dialog"
      :close-on-click-modal = "false"
      :close-on-press-escape = "false"
      size="tiny"
      :show-close = "false"
    >
      <div class="text-indent">
        云诊室属于网络诊间行为，初诊患者能通过云诊室获取医生的诊治建议；复诊患者能通过云诊室获取医生的诊治建议和相关医嘱；
        按照相关规范，云诊室目前只能使用自费性质就诊
      </div>
      <div slot="footer" class="dialog-footer">
        <a href="javascript:;" class="common-main-button"  @click="cloud_tips_dialog=false">确 定</a>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import Steps from '../../components/Steps'
  import Position from '../../components/Position'
  import SearchBar from '../../components/SearchBar'
  import SelectRole from '../../components/SelectRole'
  import {ORG_ID, SEX, CONFIRM_PAY_TIPS, SUBMIT_SOURCE, APPOINT_DESCRIPTION, CLOUD_MENU, PLATFORM_PREFIX, commonAjax, IMGURLAPP} from '../../api/api'
  export default {
    data () {
      return {
        imgapi: IMGURLAPP,
        menu: CLOUD_MENU,
        imgboxdialog: false,
        dialogImageUrl: '',
        uploadheader: {
          'X-Access-Token': localStorage.getItem('accessToken')
        },
        dialogVisible: false,
        dialog: false,
        cloud_tips_dialog: true,
        dialogTitle: '',
        dialogContent: '',
        person: JSON.parse(localStorage.person),
        time: JSON.parse(localStorage.time),
        dep: JSON.parse(localStorage.dep),
        dept: JSON.parse(localStorage.dept),
        doctor: JSON.parse(localStorage.doctor),
        SEX: SEX,
        CONFIRM_PAY_TIPS: CONFIRM_PAY_TIPS,
        APPOINT_DESCRIPTION: APPOINT_DESCRIPTION,
        symptom_text: '',
        filelist: []
      }
    },
    mounted () {
      document.body.scrollTop = document.documentElement.scrollTop = 0
      if (!localStorage.person) {
        return
      }
      console.log(JSON.stringify(this.person))
    },
    methods: {
      handleRemove (file, fileList) {
        this.filelist = fileList
      },
      handlePictureCardPreview (file) {
        this.dialogImageUrl = file.url
        this.imgboxdialog = true
      },
      beforeupload (file) {
        const isJPEG = file.type === 'image/jpeg'
        const isJPG = file.type === 'image/jpg'
        const isPNG = file.type === 'image/png'
        if (!isJPEG && !isJPG && !isPNG) {
          this.$message.error('上传头像图片只能是 jpeg,jpg,png 格式!')
        }
        return isJPG || isJPEG || isPNG
      },
      uploadok (res, file, filelist) {
        if (res.code === 200) {
          this.filelist = filelist
        } else {
          this.$message({
            message: '服务忙，请稍后再上传',
            type: 'error'
          })
        }
      },
      filechange (file, fileList) {
        if (fileList.length > 5) {
          this.$message({
            message: '最多上传5张图片',
            type: 'error'
          })
          this.filelist = fileList.pop()
        }
      },
      goBack () {
        window.history.back()
      },
      goPay () {
        if (!this.person.mpiId) {
          this.$message({
            message: '您的信息不完善，请先完善信息再预约挂号',
            type: 'error'
          })
          this.$router.push('/personal')
          return
        }
        this.$store.commit('UPDATE_LOADING')
        let tempstr = ''
        for (let i in this.filelist) {
          tempstr += (',' + this.filelist[i].response.illPicId)
        }
        tempstr = tempstr.slice(1)
        commonAjax(
          [{
            orgId: ORG_ID,
            mpiId: this.person.mpiId,
            domain: '',
            cardType: this.person.certificate.certificateType,
            cardNo: this.person.certificate.certificateNo,
            deptId: this.dept.deptId,
            localDeptId: this.dept.localDeptId,
            regDeptId: this.doctor.regDeptId || this.dep.regDeptId,
            localRegDeptId: this.doctor.localRegDeptId || this.dep.localRegDeptId,
            regDeptName: this.doctor.deptName || this.dep.deptName,
            seqId: this.dep.seqId,
            localDoctorId: this.doctor.localDoctorId || this.dep.localDoctorId,
            doctorName: this.doctor.doctorName,
            workDate: this.dep.workDate,
            planTime: this.dep.planTime,
            timeId: this.time.timeId,
            startTime: this.time.startTime,
            endTime: this.time.endTime,
            register: '',
            doctorId: this.doctor.doctorId || '',
            source: SUBMIT_SOURCE,
            illPicId: tempstr,
            illDescribe: this.symptom_text,
            illName: ''
          }, 2],
          `${PLATFORM_PREFIX}.registrationService`,
          'doRegistrationSync'
        ).then(res => {
          this.$store.commit('UPDATE_LOADING')
          if (res.data.code === 200) {
            localStorage.order = JSON.stringify(res.data.body)
            let d = res.data.body
            if (localStorage.appointType === '3') {
              this.dialogTitle = CONFIRM_PAY_TIPS[6].title
              this.dialogContent = CONFIRM_PAY_TIPS[6].content
              this.dialog = true
              return
            }
            if (d.daylight === '1') {
              // 夏令时
              this.dialogTitle = CONFIRM_PAY_TIPS[4].title
              this.dialogContent = CONFIRM_PAY_TIPS[4].content
            } else if (d.daylight === '2') {
              // 冬令时
              this.dialogTitle = CONFIRM_PAY_TIPS[5].title
              this.dialogContent = CONFIRM_PAY_TIPS[5].content
            } else {
              if (d.firstDiagnosis === '1') {
                // 初诊
                this.dialogTitle = CONFIRM_PAY_TIPS[0].title
                this.dialogContent = CONFIRM_PAY_TIPS[0].content
              } else {
                this.dialogTitle = CONFIRM_PAY_TIPS[d.nature].title
                this.dialogContent = CONFIRM_PAY_TIPS[d.nature].content
              }
            }
            this.dialog = true
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error'
            })
          }
        }).catch(res => {
          this.$store.commit('UPDATE_LOADING')
          console.warn(res)
        })
      },
      confirmSubmit () {
        this.$router.replace('/cloud/pay')
      },
      selectFamilyHandle (f) {
        this.person = f
      }
    },
    components: {Steps, Position, SearchBar, SelectRole}
  }
</script>

<style lang="less">
  .Confirm {
    .content {
      width: 1080px;
      margin: 0 auto;
      background-color: #ffffff;
      overflow: hidden;
    }
    .content .position_now img {
      margin-left: 20px;
      vertical-align: middle;
    }
    .content .position_now {
      margin-top: 22px;
    }
    .content .position_now span {
      font-family: SimSun;
      font-size: 12px;
      color: #666666;
    }
    .border_content .sure_message {
      color: #EE7202;
      font-size: 24px;
      padding: 20px;
    }
    .border_content .sure_message_content {
      width: 1040px;
      background-color: rgb(254, 251, 248);
      margin-left: 20px;
      border: 1px solid rgb(245, 230, 221);
    }
    .sure_message_content .name span {
      display: inline-block;
    }
    .sure_message_content .name span:nth-of-type(1) {
      margin-left: 24px;
    }
    .sure_message_content .name span:nth-of-type(2) {
      margin-left: 16px;
      color: #993333;
    }
    .sure_message_content .name {
      height: 46px;
      width: 1010px;
      margin: 0 auto;
      border-bottom: 1px solid rgb(245, 230, 221);
      line-height: 46px;
    }
    .sure_message_content .jiu_card_num {
      margin-top: 30px;
      margin-left: 38px;
    }
    .sure_message_content .jiu_card_num span:nth-of-type(1) {
      color: #666666;
    }
    .sure_message_content .jiu_card_num span:nth-of-type(2) {
      color: #333333;
      display: inline-block;
      margin-left: 28px;
    }
    .sure_message_content .yi_card_number {
      margin-top: 18px;
      margin-left: 38px;
    }
    .sure_message_content .yi_card_number span:nth-of-type(1) {
      color: #666666;
    }
    .sure_message_content .yi_card_number span:nth-of-type(2) {
      color: #333333;
      display: inline-block;
      margin-left: 28px;
    }
    .sure_message_content .id_card_num {
      margin-top: 18px;
      margin-left: 38px;
    }
    .sure_message_content .id_card_num span:nth-of-type(1) {
      color: #666666;
    }
    .sure_message_content .id_card_num span:nth-of-type(2) {
      color: #333333;
      display: inline-block;
      margin-left: 28px;
    }
    .sure_message_content .department_time {
      width: 1000px;
      padding: 20px;
      background-color: rgb(253, 244, 236);
      margin: 0 auto;
      margin-top: 20px;
      overflow: hidden;
    }
    .department_time .department_title {
      color: #999;
    }
    .department_time .doctor_name {
      margin-top: 12px;
    }
    .department_time .doctor_name span:nth-of-type(1) {
      color: #333333;
    }
    .department_time .doctor_name span:nth-of-type(2) {
      display: inline-block;
      color: #993333;
      margin-left: 20px;
    }
    .department_time .onduty_time_title {
      margin-top: 20px;
      color: #999;
    }
    .department_time .onduty_time {
      padding-top: 10px;
    }

    .sure_message_content .money_button {
      margin-left: 40px;
      margin-top: 26px;
      padding-bottom: 30px;
    }

    .sure_message_content .price {
      margin-top: 30px;
      width: 1010px;
      border-bottom: 1px solid rgb(245, 230, 221);
      height: 80px;
      margin: 0 auto;
      line-height: 80px;
      padding-left: 30px;
    }
    .sure_message_content .price span {
      display: inline-block;
    }
    .sure_message_content .price span:nth-of-type(1) {
      font-size: 14px;
      color: #333333;
    }
    .sure_message_content .price span:nth-of-type(2) {
      font-size: 20px;
      color: #993333;
    }
    .border_content .warn {
      margin: 40px;
      padding-bottom: 100px;
    }
    .border_content .warn li {
      font-size: 14px;
      color: #666666;
      margin-top: 10px;
      font-family: 'Microsoft YaHei';
    }
    .alert_confirm .border {
      width: 100%;
      height: 1px;
      background-color: rgb(229, 229, 229);
    }
    .confirm_content {
      height: 300px;
      overflow: auto;
    }
    .select_famlity {
      margin-left: 80%;
      margin-top: 20px;
    }
    .select_famlity img {
      vertical-align: middle;
    }
    .select_famlity span {
      vertical-align: middle;
      font-size: 14px;
    }
    .famlity_person {}
    .famlity_person li {
      float: left;
      margin-left: 10%;
      margin-top: 5%;
    }
    .famlity_person .message {
      width: 216px;
      height: 42px;
    }
    .symptom_desc{
      width: 1010px;
      margin: 0 auto;
      border-bottom: 1px solid rgb(245, 230, 221);
      display:flex;
      padding:10px 0;
    }
    .symptom_desc>span{
      margin-left:24px;
      width:100px;
    }
    .needed{
      color:#EE7202;
      padding:0 2px;
    }
    .symptom_text{
      flex:1 1;
    }
  }
</style>
